<template>
    <view>
        <Header title="我的" :background="background" fontColor="black" />
        <NavBar :activeIndex="3"/>
        <view class="page" :style="{'min-height': `${noBarHeight}px`}">
            <view class="user">
                <img class="user_img" :src="userInfo.img || 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/like_icon.png'" alt="头像" />
                <view class="user_info">
                    <view class="user_name">
                        {{ userInfo.member || '姓名'}}
                        <span class="vip_font">{{ userInfo.level }}</span>
                    </view>
                    <view class="user_id">ID: {{ userInfo.last_time1 }}{{ userInfo.id }}</view>
                </view>
            </view>
            <img class="tps-img" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/share_img.png" />
            <view @click.stop="onNav(item)" v-for="(item, index) in listData" :key="index" class="list">
                <img class="list_icon" :src="item.url" :alt="item.title" />
                <view class="list_title">{{ item.title }}</view>
                <img class="list_right" src="https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/right_icon.png" />
            </view>
        </view>
    </view>
</template>
<script>
import {checkLogin, userInfo} from "@/utils/api/user";

var app = getApp()
import Header from "@/components/Header.vue";
import NavBar from "@/components/NavBar.vue";
export default ({
    name: "my",
    data() {
        return {
            background: '#f4f5ff',
            noBarHeight: app.globalData.noBarHeight,
            listData: [
                {
                    id: 1,
                    url: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/crown_icon.png',
                    path: '../../subpages/pages/authority/authority',
                    title: '会员权限'
                },
                {
                    id: 2,
                    url: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/star_icon.png',
                    path: '../../subpages/pages/collect/collect',
                    title: '我的收藏'
                },
                {
                    id: 3,
                    url: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/sound_icon.png',
                    path: '../../subpages/pages/imCenter/imCenter',
                    title: '信息中心'
                },
                {
                    id: 4,
                    url: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/like_icon.png',
                    path: '../../subpages/pages/help/help',
                    title: '帮助反馈'
                },
                {
                    id: 5,
                    url: 'https://xunlantech.oss-cn-hangzhou.aliyuncs.com/source/static/image/setting_icon.png',
                    path: '../../subpages/pages/setting/setting',
                    title: '账号设置'
                },
            ],
            userInfo: {},

        }
    },
    components: {
        NavBar,
        Header
    },
    created() {
        const params = {
            uid: uni.getStorageSync('uid')
        }
        console.log(111)
        userInfo(params).then(res => {
            this.userInfo = res.data
        })
    },
    methods: {
        // 跳转指定页面
        onNav(item) {
            uni.navigateTo({
                url: item.path
            })
        }
    }
})
</script>

<style scoped lang="scss">
.page {
    flex-direction: column;
    width: 100%;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    .user {
        width: 100%;
        height: 200rpx;
        background: #f5f6ff;
        padding: 20rpx 54rpx;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        .user_img {
            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;
            //background: #D8D8D8;
        }
        .user_info {
            width: 100%;
            height: 100%;
            flex: 1;
            padding: 20rpx 38rpx;
            display: flex;
            align-content: space-around;
            justify-content: space-around;
            flex-direction: column;
            box-sizing: border-box;
            .user_name {
                font-size: 32rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #000000;
                line-height: 33rpx;
                .vip_font {
                    font-size: 24rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #5162FD;
                    line-height: 33rpx;
                    margin: 0 20rpx;
                }
            }
            .user_id {
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9B9B9B;
                line-height: 33rpx;
            }
        }
    }
    .tps-img {
        width: 674rpx;
        height: 140rpx;
        margin: 30rpx 0;
    }
    .list {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 88rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
        .list_icon {
            width: 32rpx;
            height: 32rpx;
        }
        .list_title {
            width: 100%;
            height: 100%;
            padding: 0 20rpx;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #494949;
            line-height: 40rpx;
            flex: 1;
        }
        .list_right {
            width: 16rpx;
            height: 24rpx;
        }
    }
}
</style>
